<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<title>前端开发团队</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
	<!-- 外联的CSS文件-->
	<link rel="stylesheet" href="css/bootstrap.css"/> 
	<link rel="stylesheet" href="css/bootstrap-responsive.css"/> 
	<link rel="stylesheet" href="css/docs.css"/> 



	<script type="text/javascript" src="js/SyntaxHighlighter/scripts/XRegExp.js"></script>
	<script type="text/javascript" src="js/SyntaxHighlighter/scripts/shCore.js"></script>
	<script type="text/javascript" src="js/SyntaxHighlighter/scripts/shAutoloader.js"></script>
	<link type="text/css" rel="stylesheet" href="js/SyntaxHighlighter/styles/shCore.css"/>
	<link type="text/css" rel="Stylesheet" href="js/SyntaxHighlighter/styles/shThemeDefault.css" />




	<style>
	body, input, button, textarea {
		font-family: "Microsoft Yahei","微软雅黑",Tahoma,Arial,Helvetica,STHeiti,sans-serif;
	  font-weight: normal;
	}
	div.prettyprint{
		border-radius: 4px 4px 4px 4px;
		display: block;
		font-size: 1em;
		line-height: 20px;
		margin:10px 0px;
	}
	.syntaxhighlighter .container:before, .container:after {
		content: none;
	}
	.syntaxhighlighter .gutter .line {
		 border-right: 0px solid #6CE26C !important
	}
	.syntaxhighlighter,.syntaxhighlighter .line.alt2,.syntaxhighlighter .line.alt1 {
		background: none !important;
	}
	</style> <!--内联 css 代码-->
    <link href="css/prettify.css" rel="stylesheet">
    <link href="css/bootstro.css" rel="stylesheet">
</head>

<body>
<!-- Navbar ================================================== -->
<div class="navbar navbar-inverse navbar-fixed-top">
	<div class="navbar-inner">
		<div class="container">
			<a class="brand" href="index.html">前端开发团队</a>
		
			<div class="nav-collapse collapse">
				<ul class="nav">
					<li class="active">
						<a href="index.html">首页</a>
					</li>
					<li class="">
						<a class="bootstro" href="getting-started.html">起步</a>
					</li>
					<li class="">
						<a class="bootstro" href="scaffolding.html">脚手架</a>
					</li>
					<li class="">
						<a class="bootstro" href="base-css.html">基本的CSS样式</a>
					</li>
					<li class="">
						<a class="bootstro" href="components.html">组件</a>
					</li>
					<li class="">
						<a class="bootstro" href="api.html">API手册</a>
					</li>
					<li class="">
						<a class="bootstro" href="docs.html">经验交流</a>
					</li>
					<li class="">
						<a class="bootstro" href="tools.html">工具</a>
					</li>
					<li class="">
						<a class="bootstro" href="about.html">关于</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>
    

<!-- Subhead
================================================== -->
<header class="jumbotron subhead" id="overview">
  <div class="container">
    <h1>起步</h1>
    <p class="lead">简介整个项目、组件、和如何使用一个简单的模版入门</p>
  </div>
</header>

  <div class="container">
    <!-- Docs nav
    ================================================== -->
    <div class="row">
      <div class="span3 bs-docs-sidebar">
        <ul class="nav nav-list bs-docs-sidenav affix-top">
          <li><a href="#p1"><i class="icon-chevron-right"></i> 文件结构</a></li>
		  <li><a href="#p2"><i class="icon-chevron-right"></i> 文件命名</a></li>
		  <li><a href="#p3"><i class="icon-chevron-right"></i> 基本的HTML模版</a></li>
		  <li><a href="#p4"><i class="icon-chevron-right"></i> 静态资源管理</a></li>
 
        </ul>
      </div>
      <div class="span9">
		<section id="p1">
		  <div class="page-header">
			<h1>文件结构</h1>
		  </div>
		  <p class="lead">构建整体项目我们基本采用统一的目录结构。所有文件按逻辑进行分类存储。</p>
		  <p>基本的文件结构如下：</p>
		  <pre class="prettyprint">
  /
  ├── jlib/
  │   ├── jquery/
  │   ├── datepicker/
  ├── css/
  │   ├── common.css
  │   ├── common.min.css
  ├── js/
  │   ├── common.js
  │   ├── common.min.js
  ├── images/
      ├── background.png
      ├── btn.png
  
</pre>
<p>这就是的基本结构：文件可以快速应用于任何web项目。(<code>*.min.*</code>)带有min内容表示压缩后的代码文档。</p>
<p>我们使用<code>jlib</code>目录用于专门存放第三方库，第三方库如果有版本号，必须注明版本。</p>
<p>对于lib库我们管理目录如下  (<code>{第三方组件名称}/{组件版本}/</code>)
<pre class="prettyprint">
.... /jlb/jquery/2.0.0/jquery.min.js
</pre>
<p>这里需要注意的是第三方库的Demo文件尽量不要放置在项目中</p>
<p>获取资源：<code>SVN\\10-前端开发\200-项目资源库</code></p>


<br />
<p>在Java开发项目中项目资源，我们可能需要更加复杂的结构，如下：</p>
<pre class="prettyprint">
  {static}/
  ├── jlib/
  │   ├── jquery/
  │   ├── datepicker/
  ├── css/
  │   ├── common.css
  │   ├── common.min.css
  ├── js/
  │   ├── common.js
  │   ├── common.min.js
  ├── images/
  │   ├── background.png
  │   ├── btn.png
  ├── {app}/
       ├── css/
       │   ├──common.css
       │   ├──common.min.css
       ├── js/
       │   ├──common.js
       │   ├──common.min.js
       ├── images/
             ├──icon.png
             ├──btn.png

</pre>
<p>{static}表示静态资源的目录路径，{app}表示项目的子应用名称(如果没有子应用，可以忽略)。</p>

		
		</section>
		<section id="p2">
		  <div class="page-header">
			<h1>文件命名</h1>
		  </div>
		  <p class="lead">对于资源文件我们将采用统一的命名规则</p>
		  
		  <p>保留命名</p>
		   <table class="table table-bordered">
			<tr>
				<td>base.*</td>
				<td>所有项目通用核心文件</td>
			</tr>
			<tr>
				<td>common.*</td>
				<td>系统或者应用通用的资源文件</td>
			</tr>
			<tr>
				<td>utils.*</td>
				<td>帮助类文件</td>
			</tr>
			<tr>
				<td>reset.*</td>
				<td>重置文件(默认样式/事件重置)</td>
			</tr>
		   </table>
		</section>

		<section id="p3">
		  <div class="page-header">
			<h1>基本的HTML模版</h1>
		  </div>
		  <p class="lead">我们将提供一个最近基本的HTML模板, 帮助大家构建一个Web网页的基本结构。</p>
		   <p>HTML 基本结构</p>
		  <div class="prettyprint linenums">
		  <script type="syntaxhighlighter" class="brush: html; ">
<![CDATA[
<!DOCTYPE html> <!-- 声明docmentType-->
<html xmlns="http://www.w3.org/1999/xhtml"> <!-- 声明命名空间(非必须)-->
 <head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <!-- 声明文档编码类型-->
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> <!-- 声明兼容类型(非必须)-->
  <title>界面头部书写规范指导</title>  <!-- 文件title-->
  <link rel="icon" href="images/favicon.ico" /> <!-- icon图标 (非必须)-->
  <link rel="stylesheet" href="css/common-min.css"/> <!-- 外联的CSS文件-->
  <link rel="stylesheet" href="css/common-min2.css"/> 
  <script src="js/common.js">< /script><!-- 外联的JS文件-->
  <script src="js/common2.js">< /script>
  <style></style> <!--内联 css 代码-->
  <script></ script> <!--内联 js 代码-->
 </head> 
 <body>
	<h1>范例指导</h1>
 </body>
</html>
]]>
</script>
		</div>
		   <p>HTML5 结构</p>
		<div class="prettyprint linenums">
<script type="syntaxhighlighter" class="brush: html; ">
<![CDATA[
<!DOCTYPE html>
 <html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<title>标题</title>
		<link rel="shortcut icon" href="/favicon.ico" />
		<link rel="stylesheet" href="css/common.css?v=1.0" />
		<script src="js/common.min.js">< /script>
	</head>
	<body>
	</body>
</html>
]]>
 </script>
		  </div>
		</section>


		<section id="p4">
		  <div class="page-header">
			<h1>静态资源管理</h1>
		  </div>
		  <p class="lead">为了防止客服端与服务端缓存，引入静态资源文件版本管理</p>
		  <p>为了更加方便的更新静态资源的版本号，我们提供了自动化更新工具，具体如下：</p>
		  <p><a href="p/autoVersion.html" target="_blank" class="btn btn-large btn-primary">静态资源自动化管理工具</a></p>
		</section>

      </div>
    </div>

  </div>

    <!-- Footer
    ================================================== -->
    <footer class="footer">
      <div class="container">
        <p>苏州科达科技股份有限公司 - 前端开发团队</p>
      </div>
    </footer>



<script type="text/javascript">
SyntaxHighlighter.autoloader(
	'applescript			js/SyntaxHighlighter/scripts/shBrushAppleScript.js',
	'actionscript3 as3		js/SyntaxHighlighter/scripts/shBrushAS3.js',
	'bash shell				js/SyntaxHighlighter/scripts/shBrushBash.js',
	'coldfusion cf			js/SyntaxHighlighter/scripts/shBrushColdFusion.js',
	'cpp c					js/SyntaxHighlighter/scripts/shBrushCpp.js',
	'c# c-sharp csharp		js/SyntaxHighlighter/scripts/shBrushCSharp.js',
	'css					js/SyntaxHighlighter/scripts/shBrushCss.js',
	'delphi pascal			js/SyntaxHighlighter/scripts/shBrushDelphi.js',
	'diff patch pas			js/SyntaxHighlighter/scripts/shBrushDiff.js',
	'erl erlang				js/SyntaxHighlighter/scripts/shBrushErlang.js',
	'groovy					js/SyntaxHighlighter/scripts/shBrushGroovy.js',
	'java					js/SyntaxHighlighter/scripts/shBrushJava.js',
	'jfx javafx				js/SyntaxHighlighter/scripts/shBrushJavaFX.js',
	'js jscript javascript	js/SyntaxHighlighter/scripts/shBrushJScript.js',
	'perl pl				js/SyntaxHighlighter/scripts/shBrushPerl.js',
	'php					js/SyntaxHighlighter/scripts/shBrushPhp.js',
	'text plain				js/SyntaxHighlighter/scripts/shBrushPlain.js',
	'py python				js/SyntaxHighlighter/scripts/shBrushPython.js',
	'ruby rails ror rb		js/SyntaxHighlighter/scripts/shBrushRuby.js',
	'scala					js/SyntaxHighlighter/scripts/shBrushScala.js',
	'sql					js/SyntaxHighlighter/scripts/shBrushSql.js',
	'vb vbnet				js/SyntaxHighlighter/scripts/shBrushVb.js',
	'xml xhtml xslt html	js/SyntaxHighlighter/scripts/shBrushXml.js'
);
SyntaxHighlighter.all();
</script>

</body>
</html>	
